<template>
	<el-card class="box-card mb10" shadow="never">
		<template #header>
			<div class="flex-header">
				<div class="card-main-title">已分配接口{{ selectionAry.length }}</div>
				<el-button class="button" type="primary" :disabled="selectionAry.length == 0" plain @click="handleCancelDivide()">取消分配</el-button>
			</div>
		</template>
		<static-table ref="staticTableRef" :tableData="tableData" @on-selection-change="handleSelectionChange" :loading="loading">
			<template #vux-search>
				<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
					<el-row :gutter="30" justify="start">
						<el-col :span="6">
							<el-form-item class="form-item" prop="apiName">
								<dict-select v-model="searchForm.apiMod" :dictKey="'sys_operate_module'" placeholder="请选择所属模块" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" prop="apiName">
								<el-input v-model="searchForm.apiName" placeholder="请输入接口名称" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" prop="apiUrl">
								<el-input v-model="searchForm.apiUrl" placeholder="请输入接口地址" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<div class="search-btn mt0" style="text-align: left">
								<el-button type="primary" @click="handleSearch">查询</el-button>
								<el-button @click="handleReset">重置</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</template>
			<template #vux-column>
				<vxe-column type="checkbox" width="50" fixed="left" />
				<vxe-column field="apiName" min-width="120" show-overflow="tooltip" title="接口名称" />
				<vxe-column field="apiUrl" min-width="120" show-overflow="tooltip" title="接口地址" />
				<vxe-column field="apiMod" min-width="120" :formatter="formatterModlue" show-overflow="tooltip" title="所属模块" />
				<vxe-column field="apiStatus" min-width="100" title="接口状态">
					<template #default="{ row }">
						<span style="margin-right: 10px">{{ row.apiStatus == '1' ? '正常' : '停用' }}</span>
					</template>
				</vxe-column>
			</template>
		</static-table>
		<el-pagination background v-model:current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
	</el-card>
</template>
<script setup>
import global from '@/utils/global'
import useTableList from '@/hooks/useTableList'
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-12 15:02:38
 */
const emit = defineEmits(['reloadTable'])
const route = useRoute()
const state = reactive({
	searchForm: {
		appId: null,
		apiName: '',
		apiUrl: '',
		apiMod: '',
		apiStatus: '',
		isShare: 1,
	},
	searchFormRef: null,
	selectionAry: [],
})
const { searchForm, searchFormRef, selectionAry } = toRefs(state)

const queryUrl = '/meta-system/web/v1/authApiInfo/list'
const { loading, dataCount, handleInitQuery, getDictKeyText, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm, true, false)

/*
 *@Description: 生命周期
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-15 10:56:51
 */

onMounted(() => {
	handleSearch()
})

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:16:03
 */
const handleSelectionChange = records => {
	console.log(records)
	state.selectionAry = records
}
const handleSearch = () => {
	state.searchForm.appId = route.query.id
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	handleSearch()
}
const formatterModlue = ({ cellValue }) => {
	return getDictKeyText('sys_operate_module', cellValue)
}
const handleCancelDivide = () => {
	const ids = state.selectionAry.map(item => item.id)
	global.$fetchPostData(`/meta-system/web/v1/authApiInfo/distribution`, { appId: route.query.id, apiIdList: ids, addOrDel: 2 }).then(data => {
		if (data.code == 200) {
			global.$baseMessage(data.msg, 'success')
			emit('reloadTable')
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleSearch,
})
</script>
<style lang="scss" scoped>
:deep() {
	.el-form-item__content {
		color: #515a6e;
	}
	.el-card {
		border: 1px solid var(--el-card-border-color);
	}
}
.flex-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.box-card {
	:deep() {
		.el-card__header {
			padding: 9px 16px;
		}
		.el-card__body {
			height: 60vh;
			overflow-y: auto;
			overflow-x: hidden;
		}
	}
}
</style>
